<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡（transition</title>
	<style type="text/css">
		body {background: #abcdef;}
		div {
			width: 800px;
			height: 800px;
			margin:auto;
			transform: rotate(0deg);
			background: url(02_09.png) no-repeat center center;/*链接一个背景图片，不重复，上下居中，左右居中*/
			-webkit-transition:transform 2s ease-in-out 1s;/*名称：transform 持续时间2S 过度方式：ease-in-out 延迟：1S*/
			   -moz-transition:transform 2s ease-in-out 1s;
			    -ms-transition:transform 2s ease-in-out 1s;
			     -o-transition:transform 2s ease-in-out 1s;
			        transition:transform 2s ease-in-out 1s;
		}
		div:hover {
			cursor: pointer;/*将鼠标图标转换成手势形状*/
			transform:rotate(180deg);
			-webkit-transition:transform 2s ease-in-out 1s;
			-moz-transition:transform 2s ease-in-out 1s;
			-ms-transition:transform 2s ease-in-out 1s;
			-o-transition:transform 2s ease-in-out 1s;
			transition:transform 2s ease-in-out 1s;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>